<template>
<div class="setting-wrap">
    <el-form class="setting-form" ref="form" :model="form" label-width="90px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础设置" name="base">
                <div class="el-form-item__content100">
                    <el-form-item label="开启网站">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item label="开启注册">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100 flex-50">
                    <el-form-item class="el-form-item" label="平台名称" rules="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="LOGO" rules="name">
                        <el-image style="width: 100px; height: 100px" :src="url" fit="contain"></el-image>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="网站名称" rules="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="网站简称">
                        <el-input v-model="form.Abbr"></el-input>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="关键字">
                        <el-input v-model="form.Keyword"></el-input>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="描述">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item class="el-form-item flex-50" label="ICP备案号">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>
                </div>
            </el-tab-pane>
            <el-tab-pane label="验证码设置" name="third">
                <el-form-item label="开启验证码">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="验证码模块">
                    <el-checkbox-group v-model="validateModule" size="mini">
                      <el-checkbox label="后台登录"></el-checkbox>
                      <el-checkbox label="用户登录"></el-checkbox>
                      <el-checkbox label="用户注册"></el-checkbox>
                      <el-checkbox label="发表评论"></el-checkbox>
                      <el-checkbox label="找回密码"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-divider content-position="left">验证码样式</el-divider>
            </el-tab-pane>
            <el-tab-pane label="图片相关" name="fourth">
              <el-divider content-position="left">图片水印</el-divider>
              <el-form-item label="开启水印">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="用户相关" name="second">
                <div class="el-form-item__content100">
                    <el-form-item label="注册认证">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item label="认证方式">
                        <el-radio-group v-model="radio4" size="mini">
                            <el-radio-button label="邮件"></el-radio-button>
                            <el-radio-button label="短信"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="el-form-item__content100">
                    <el-form-item label="注册协议" style="line-height:auto">
                        <vue-ueditor-wrap v-model="userAgreementContent" :config="userAgreement"></vue-ueditor-wrap>
                    </el-form-item>
                </div>
            </el-tab-pane>

            
        </el-tabs>
        <el-form-item size="large">
            <el-button type="primary">保存更改</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

</div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
    name: "setting",
    components: {
        VueUeditorWrap
    },
    data() {
        return {
            userAgreementContent: null,
            validateModule:[],
            form: {
                name: "",
                Abbr: "",
                Keyword: "",
                description: ""
            },
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            rules: {
                name: [{
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    }
                ]
            },
            userAgreement: {
                UEDITOR_HOME_URL: "/UEditor/",
                // 初始容器高度
                initialFrameHeight: 240,
                // 初始容器宽度
                initialFrameWidth: 'auto',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                serverUrl: 'http://35.201.165.105:8000/controller.php',
            }
        };
    }
};
</script>

<style lang="less">
.setting-wrap {
    .el-tabs__header {
        width: 100% !important;
    }
}

.setting-wrap {
    font-size: 14px;
}

.setting-form {
    width: 1024px;
}

.setting-input {
    display: inline-block;
    width: 70%;
}

.el-form-item__content50 {
    width: 50%;
    display: inline-block;
}

.el-form-item__content100 {
    width: 100%;
    display: inline-block;
}
</style>
